<template>
  <div id="search">
    <div class="search-container">
      <div class="search-title">查询</div>
      <div class="form-search">
        <div class="pay-type">
          <div style="margin-bottom:30px">支付类型:</div>
          <el-radio-group v-model="PayType" @change="chooseType()">
            <el-radio-button label="1" border class="button-style"><div>先下单后付款</div></el-radio-button>
            <el-radio-button label="2" border class="button-style"><div>允许先付款后下单</div></el-radio-button>
            <el-radio-button label="3" border class="button-style"><div>仅允许下单</div></el-radio-button>
          </el-radio-group>
        </div>
        <div class="union-pay">
          <div style="margin-bottom:30px">合单模式:</div>
          <el-radio-group v-model="UnionPay" @change="choosePay()">
            <el-radio-button label="1"  border class="button-style">
              <div >合单</div>
            </el-radio-button>
            <el-radio-button label="2" border class="button-style">
              <div >不合单</div>
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="yes-no">
          <el-button type="primary" class="define">确 定</el-button>
          <el-button  class="define">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      PayType: "",
      UnionPay: "",
    };
  },
  methods: {
    chooseType() {
      console.log(this.PayType);
    },
    choosePay() {
      console.log(this.PayType);
    },
  },
};
</script>

<style lang='less' scoped>
.search-container {
  background-color: #fff;
  //   height: 8rem;
  border: 0.1rem solid #dbe0e9;
  .search-title {
    height: 4rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    font-size: 1.4rem;
    padding-left: 3rem;
    font-weight: 500;
    color: #666666;
  }
  .form-search {
    margin: 1rem;
    padding: 1.5rem;
    background-color: #f5f9fc;
    box-sizing: border-box;
  }
}

.pay-type{
  margin-left: 200px;
  margin-top: 50px;
}

.union-pay{
  margin-left: 200px;
  margin-top: 50px;
}
.yes-no{
  margin-left: 200px;
  margin-top: 50px;
  .define{
    margin-left: 100px;
  }
}
.button-style{
  margin-left: 40px;
     border: none;     
  div{
    height: 40px;
    width: 200px;
    line-height: 40px;
   
  }
}
.button-style /deep/ .el-radio-button__inner{
  border: 1px solid rgb(212, 210, 210);
  border-radius: 5px;
}
</style>